<template>
    <div class="div_width">
      <el-row style="padding-top: 10px;margin-bottom: 30px;padding-left: 10px">
        <span style="font-size: 14px"><i class="el-icon-back"></i>返回</span>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div class="border_left">
            <el-row style="margin-bottom: 10px;font-size: 18px">基本信息</el-row>
            <el-form v-model="productInfo"     label-position="right" label-width="80px">
              <el-col :span="21" :push="1">
                <el-form-item label="产品类别">
                  <el-cascader v-model="category" ref="myCascader" :options="data2"
                               :props="{value:'pcId',children:'children', label: 'pcName',expandTrigger: 'hover', checkStrictly: true }"
                               @change="handleChange"  clearable></el-cascader>
                </el-form-item>

              </el-col>
              <el-col :span="21" :push="1" prop="name">
                <el-form-item label="产品名称">
                  <el-input size="medium" autocomplete="off" v-model="productInfo.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="21" :push="1">
                <el-form-item label="型号" prop="model">
                  <el-input size="medium" autocomplete="off" v-model="productInfo.model"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="21" :push="1">
                <el-row>
                    <el-col :span="12">
                      <el-form-item label="库存">
                        <el-input size="medium" autocomplete="off" v-model="productInfo.number"></el-input>
                      </el-form-item>
                    </el-col>
                  <el-col :span="12">
                    <el-form-item label="单位">
                      <el-input size="medium" autocomplete="off" v-model="productInfo.unit"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>

              <el-col :span="21" :push="1">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="进价" prop="factoryPrice">
                      <el-input size="medium" autocomplete="off" v-model="productInfo.factoryPrice"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                        <el-form-item label="售价" prop="price">
                      <el-input size="medium" autocomplete="off" v-model="productInfo.price"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="21" :push="1">
              </el-col>
            </el-form>
          </div>
        </el-col>
        <el-col :span="15" :push="1">
          <div class="border_right">
            <span style="font-size: 18px">产品设置</span><br/>
            <el-row style="font-size: 14px;margin-top: 15px;margin-bottom: 5px">
              <el-col :span="4">商品多规格:</el-col>
              <el-col :span="4">
                    <i class="el-icon-setting"  style="cursor: pointer">新增产品类别</i>
              </el-col>
              <el-col :span="4">
                <i class="el-icon-s-tools" style="cursor: pointer">新增产品类型</i>
              </el-col>
              <el-col :span="4">
                <i class="el-icon-s-tools" style="cursor: pointer" @click="addModelValue" >新增产品规格</i>
              </el-col>
            </el-row>
            <div class="border_right_one">
              <el-row v-for="(items,index) in specificationsInfo ">
              <div class="border_right_one_one">
                <span>{{items.onsName}}</span><span style="cursor: pointer" @click="addModel(items)"><i class="el-icon-circle-plus-outline"></i></span><br/>
                <el-checkbox-group  v-model="qdingvalue">
                  <el-col :span="8" v-for="(myrole) in items.zspecificationsvaluesByOnsId" :key="myrole.specId" style="line-height: 50px">
                    <el-checkbox :label="myrole"
                                 :key="myrole.specId"
                                 :checked="checkedState"
                                 @change="groupChange(myrole,items.onsId)">
                      <span>{{myrole.specVlaue}}</span>
                    </el-checkbox>
                  </el-col>
                </el-checkbox-group>
              </div>
            </el-row>

            </div>
          </div>

        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20" style="padding: 0 0 0 10px">
          <el-col :span="20" style="padding: 0 0 0 10px">
            <el-upload
              ref="upload"
              action="string"
              :limit="3"
              :auto-upload="true"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :http-request="uploadImg"
              :file-list="fileList">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="imageUrl" alt="">
            </el-dialog>
        </el-col>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" style="margin-left: 500px">
          <el-button>
            <i class="el-icon-circle-plus" @click="addProduct">新增产品</i>
          </el-button>
        </el-col>
      </el-row>

      <div>
        <el-dialog title="新增规格值"  :visible.sync="kpVisable" :close-on-click-modal="false">
          <el-form :model="modelInfo" label-width="80px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="规格名称:">
                  <el-input  style="width: 100%" v-model="modelInfo.modelName" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="规格值:">
                  <el-input  style="width: 100%" v-model="modelInfo.specVlaue" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="modelOk(0)">取 消</el-button>
            <el-button type="primary" @click="modelOk(1)">提交</el-button>
          </div>
        </el-dialog>


        <el-dialog title="新增规格"  :visible.sync="modelName" :close-on-click-modal="false">
          <el-form :model="modelNameInfo" label-width="80px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="产品类别">
                  <el-cascader v-model="productCategory" ref="myCascader" :options="data2"
                               :props="{value:'pcId',children:'children', label: 'pcName',expandTrigger: 'hover', checkStrictly: true }"
                               @change="productHandleChange"  clearable></el-cascader>
                </el-form-item>
            </el-col>
              <el-col :span="12">
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="规格名称:">
                  <el-input  style="width: 100%" v-model="modelNameInfo.name" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="规格值:">
                  <el-input  style="width: 100%" v-model="modelNameInfo.valueInfo" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="productdModelOk(0)">取 消</el-button>
            <el-button type="primary" @click="productdModelOk(1)">提交</el-button>
          </div>
        </el-dialog>

      </div>
    </div>
</template>

<script>
  var formData = new FormData();
    export default {
      name: "AsAddProduct",
      data: function () {
        var priceEvent = (rule, value, callback) => {
          if(this.productInfo.factoryPrice>value){
            callback(new Error('请调整价格'));
          }else{
            callback();
          }
        };

          return {

          returnId:0,
          array:[],
          dialogVisible:false,
          imageUrl:'',
          fileList: [],
          productInfo:{
            pdId:'',
            pcId:'',
            name:'',
            model:'',
            imgpath:'',
            price:'',
            number:'',
            factoryPrice:'',
            unit:''
          },
          checkedState:false,
          productCategory:'',//新增产品下的规格
          productcId:0,//类型id
          productdId:0,//品牌id
          //新增产品规格
          modelNameInfo:{
            name:'',
            valueInfo:'',
            category:'',
          },
          modelName:false,
          //规格值新增
          validationState:true,
           validationList:[],//待验证数组
          modelInfo:{
            specId:'',
            modelName:'',
            specVlaue:'',
            zspecificationsByOnsId:'',
          },//新增规格名称
          kpVisable:false,//新增规格值弹框
          //基础数据
          category:'',//类型查询
          data2: [],//产品分类数组
          pcId:0,//类型id
          pbId:0,//品牌id
          specificationsInfo:[],//多规格
          qdingvalue:[],//确定下多规格
          ///
          value: ''
        }
      },
      created:function(){
        //加载产品分类
        this.$axios.get("http://localhost:8088/buInfo/category")
          .then(v=>{
            this.data2=v.data;
          }).catch();
      },
      methods:{
        uploadImg(param){
          formData.append('file', param.file)
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
          this.imageUrl = file.url;
          this.dialogVisible = true;
        },
        addProduct(){
          if(this.qdingvalue.length ==this.specificationsInfo.length){
            this.modelInfoEvent();
            let data=this.qs.stringify({
              productInfo : JSON.stringify(this.array),
              info:JSON.stringify(this.productInfo)
            });
            this.$axios.post("http://localhost:8088/add_Productzhao",data
            ).then(v=>{
              this.returnId=v.data;
              formData.append("returnid",v.data);
              this.$axios.post("http://localhost:8088/product_upload",formData)
                .then(v=>{
                  this.productInfo={
                    pdId:'',
                    pcId:'',
                    name:'',
                    model:'',
                    imgpath:'',
                    price:'',
                    number:'',
                    factoryPrice:'',
                    unit:''
                  },
                    this.qdingvalue=[];
                  this.$router.push({path:'/products'})
                }).catch();


            }).catch()

            this.print("待提交的数据"+this.qdingvalue);
          }else{
            this.$message("停止行为警告");
          }
        },
        productHandleChange(item){
          if(this.productCategory!=''){
            this.productcId=item[0];
            this.productdId=item[1];
          }else{
            this.productcId=0;
            this.productdId=0;
          }

        },
        //新增产品规格
        productdModelOk(info){
          if(info==0){
            this.modelName=false;
           this.modelNameInfo={
              name:'',
                valueInfo:'',
                category:'',
            }
          }else{
            this.$message("tdid"+this.productdId);
            this.$axios.get("http://localhost:8088/add_zspecifications",{params:{
                id:this.productdId,
                zspeName:this.modelNameInfo.name,
                zspeValue:this.modelNameInfo.valueInfo
              }}).then().catch()
          }
        },
        addModelValue(){
          this.modelName=true;
        },
        //新增规格值
        modelOk(value){
          if(value==0){
            this.kpVisable=false;
            this.modelInfo={
              specVlaue:'',
              zspecificationsByOnsId:'',
              specVlaue:''
            }
          }else{
            this.validationList.forEach((items,index)=>{
              if(items.specVlaue==this.modelInfo.specVlaue){
                this.validationState=false;
                this.$message("规格值重复");
              }
            })
            if(this.validationState){
              this.$axios.get("http://localhost:8088/add_info",{params:{
                  specId:this.modelInfo.specId,
                  specVlaue:this.modelInfo.specVlaue,
                }
              }).then(v=>{
                this.kpVisable=false;
                this.modelInfo={
                  specVlaue:'',
                  zspecificationsByOnsId:'',
                  specVlaue:''
                }
              }).catch()
            }
          }
        },
        //弹框打开
        addModel(item){
          this.validationList=item.zspecificationsvaluesByOnsId;
          this.modelInfo.specId=item.onsId;
          this.modelInfo.modelName=item.onsName;
          this.zspecificationsByOnsId=item;
         this.kpVisable=true;
        },
        modelInfoEvent(){
          for(let index=0;index<this.qdingvalue.length;index++){
            let modelId=this.qdingvalue[index].specId;
            this.array[index]=modelId;
          }

        },

        //复选框判断
        groupChange(info,mainId) {
          let checkboxNumber=0
          this.qdingvalue.forEach((items,index)=>{
            if(items.zspecificationsByOnsId.onsId==mainId){
              checkboxNumber+=1;
            }

          })
          if(checkboxNumber>1){
            this.qdingvalue.forEach((items,index)=>{
              this.print("全部信息"+items.specVlaue);
              if(items==info){
                this.print("要删除的对象值"+info.specVlaue);
                this.qdingvalue=[];
              }
            })
          }
          if (this.qdingvalue.length >this.specificationsInfo.length) {
            this.qdingvalue.shift();
          }
        },
        //类型下的多规格
        specificationsEvent(id){
          this.$axios.get("http://localhost:8088/zspecifications_info",{params:{id:id}}).then(v=>{
            this.specificationsInfo=v.data;
          }).catch()
        },
        //类型加品牌查询 和模糊查询
        handleChange(item) {
          if (this.category != '') {
            this.pbId = item[0];
            this.pcId = item[1];
            this.$message("类别"+ this.pcId);
            this.specificationsEvent(this.pcId);
            this.productInfo.pdId=item[0],//品牌id
              this.productInfo.pcId=item[1]//类型id
          } else {
            this.pbId = 0;
            this.pcId = 0;
            this.specificationsEvent(this.pcId);
          }
        },
      },
    }
</script>

<style scoped>
  .border_left{
    border: 1px solid #ffffff;
    width: 100%;
    margin-left: 10px
  }
  .border_right{
    border: 1px solid #ffffff;
    width: 100%;
  }
  .border_right_one{
    border: 1px solid #E6E7E7;
    width: 99%;
    height:260px;
    overflow-y: auto;
  }
  .border_right_one_one{
    border: 1px solid white;
    width: 92%;
    margin-left: 10px;
    margin-top: 10px;
  }
  .div_width{
    width: 99%;
    height: 650px;
    background-color: white;
  }
</style>
